<template>
    <div id="MyOrders">
          <div  v-if="!showLoading">
            <!--    导航栏 -->
               <van-nav-bar
                  title="已完成"
                  left-arrow
                  :fixed=true
                  :border=true
                  @click-left="$router.go(-1)"
               ></van-nav-bar>

                <div class="liebiao">
                        <div class="dingdan" v-for="(order,index) in Order_list" :key="order.id">
                              <van-cell-group>
                                <van-cell title-class="bianhan" value-class="status" center value="已完成">
                                         <template #title>
                                              <span>订单:{{order.bianhao}}</span>
                                          </template>  
                 
                                </van-cell>
                              </van-cell-group>

                              <van-cell-group>
                                   <van-cell title="订单详情"  @click='detail(order.bianhao)' is-link />

  
                              </van-cell-group>
                              
                              <van-cell-group>
                                  <van-cell title-class="title" title=' ' center>
                                         <template #default>
                                         <span style="margin-right:1rem;font-size:0.1rem;">商品数量:1</span><span>需付:<span  style="color:#0c0">{{order.totalPrice|moneyFormat}}</span></span>
                                          </template>
                                  </van-cell>
                                 <van-cell title-class="title" title=' ' center>
                                          <template #title>
                                              <span style="font-size:0.1rem;">下单时间:{{order.time}}</span>
                                          </template>
                                          
                                  </van-cell>
                              </van-cell-group>


                        </div>
               </div>

              <!-- 路由的出口 -->
              <transition name="router-slider" mode="out-in">
                <router-view></router-view>
              </transition>
          </div>
          <van-loading
                v-else
                type="spinner" 
                color="#75a342" 
                style="position:absolute;left: 50%;top: 40%;transform:translate(-50%)"
            >
               正在努力加载中....
         </van-loading> 
    </div>
</template>

<script>
 import { getYwcOrders} from './../../../service/api/index.js'  //拿到index.js 里面的getHomeData方法
  import {mapState,mapMutations} from 'vuex'
 import {Toast,Panel,Cell,CellGroup,Dialog} from 'vant'
  export default{
    name:"MyOrders",
          data(){
              return{
                //订单列表数据
                Order_list:[],
              //是否显示加载图标
              showLoading:true,
              }
          },
          mounted(){
          },
          methods:{
                detail(bianhao){
                      this.$router.push({
                          name:'detail',
                          params:{bianhao:bianhao}
                      });
                },
               async queren(bianhao){
                   let res = await queren(bianhao);
                    console.log(res);

              },

              async payOrder(oid,bianhao,totalPrice){
                  this.$router.push({
                       path:`/dashboard/mine/MyOrders/pay/${oid}/${bianhao}/${totalPrice}`
                  })
              }



          },
          
          computed:{
                 ...mapState(["userInfo"]),  //取state.js里面的值，因为它能够实时监控检测，所以计算属性中
          },
          created(){    


                      // getDifOrders(this.$route.query.sort).then((response)=>{
                      //    console.log(response);
                      //         if (response.success) {
                      //             this.Order_list=response.data;
                      //             //隐藏加载动画
                      //             this.showLoading = false;
                      //         }          
                      //   }).catch(error=>{
                      //      // todo......
                      //       console.log(error);
                      // }); 
                      // 
                      getYwcOrders(this.userInfo.token).then((response)=>{
                         console.log(response);
                              if (response.success) {
                                  this.Order_list=response.data;
                                  //隐藏加载动画
                                  this.showLoading = false;
                              }          
                        }).catch(error=>{
                           // todo......
                            console.log(error);
                      }); 


           },
  }
</script>


<style lang="less" scoped>
     #MyOrders{
      position:fixed;
      top:0;
      left:0;
      bottom:0;
      right:0;
      background-color:#f5f5f5;
      z-index:200;
      overflow-y: scroll;

     }

     .liebiao{
      margin-top:3.2rem;
      width:100%;

     }
     .dingdan{
        margin-right: 0.2rem;
        margin-left: 0.2rem;
        margin-top: 0.2rem;
     }
     .bianhan{
         font-size: 0.4rem;
         color: #999;     
     }
     .status{
          color: #0c0;
     }
     .title{
        font-size: 0.8rem;
        color: #666;
     }
    .router-slider-enter-active,.router-slider-leave-active{
      transition:all 0.3s;
    }

    .router-slider-enter,.router-slider-leave-active{
      transform:translate3d(2rem,0,0);
      opacity:0;
    }
</style>